<template>
  <a-layout-header :class="[headerTheme, 'admin-header']">
    <div :class="['admin-header-wide', layout, pageWidth, headerCss]">
      <router-link
        v-if="isMobile || layout === 'head'"
        to="/system/portal/index"
        :class="['logo', isMobile ? null : 'pc', headerTheme]"
      >
        <img :src="systemLogo" alt="logo" />
        <h1 v-if="!isMobile">{{ systemName }}</h1>
      </router-link>
      <a-divider v-if="isMobile" type="vertical" />
      <a-icon
        v-if="layout !== 'head'"
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggleCollapse"
      />

      <div
        v-if="layout !== 'side' && !isMobile"
        class="admin-header-menu"
        :style="`width: ${menuWidth};`"
      >
        <i-menu
          class="head-menu"
          :theme="headerTheme"
          mode="horizontal"
          :menu="menuData"
          @select="onSelect"
          v-if="layout === 'head'"
        />
        <a-tabs :activeKey="headMenuIndex" class="head-menu" v-else>
          <!-- v-if="item.meta" -->
          <a-tab-pane
            :key="index"
            v-for="(item, index) in menuData"
            @click="onSelect(item)"
          >
            <span slot="tab">
              <router-link
                :to="item.fullPath"
                class="head-menu-link"
                style="color: #fff"
              >
                <!-- <a-icon :type="item.meta.icon" /> -->
                <icon-fonts
                  :icon="'icon-' + item.meta.icon"
                  type="small"
                ></icon-fonts>
                {{ menuTitleTranslation(item.fullPath, item.title) }}
              </router-link>
            </span>
          </a-tab-pane>
        </a-tabs>
      </div>

      <!-- zhailei  start-->
      <ChooseOrganization
        class="project-select-warp"
        @onRefresh="onRefresh($event)"
      ></ChooseOrganization>
      <!-- zhailei  end-->

      <div :class="['admin-header-right', headerTheme]">
        <!--  -->
        <a-tooltip
          class="header-item"
          title="项目列表"
          placement="bottom"
          v-if="userAccount == 'projectListPage'"
        >
          <span @click="gotoProjectList()" class="top-button">
            <icon-fonts icon="icon-shouye"></icon-fonts>
            <span class="text">首页</span>
          </span>
        </a-tooltip>
        <!--     -->
        <a-tooltip
          class="header-item"
          title="数据大屏"
          placement="bottom"
          v-if="userAccount == 'projectDPPage' || isScreenIocn"
        >
          <span @click="gotoLargeScreen()" class="top-button">
            <icon-fonts icon="icon-daping1"></icon-fonts>
            <span class="text">大屏</span>
          </span>
        </a-tooltip>
        <!--  -->
        <a-tooltip class="header-item" title="操作手册" placement="bottom">
          <span @click="handleDownload()" class="top-button">
            <icon-fonts icon="icon-caozuoshouce"></icon-fonts>
            <span class="text">手册</span>
          </span>
        </a-tooltip>
        <!-- 搜索 -->
        <header-search
          class="header-item"
          @active="(val) => (searchActive = val)"
        />
        <!-- -->
        <a-tooltip
          class="header-item"
          :title="$ct('MessageNotification', '消息通知')"
          placement="bottom"
        >
          <header-notice
            ref="headerNotice"
            @click.native="() => ($refs.headerNotice.show = true)"
          />
        </a-tooltip>
        <!--  -->
        <!-- <a-tooltip class="header-item" title="锁屏" placement="bottom">
          <headerLock ref="headerLock"></headerLock>
        </a-tooltip> -->
        <!-- <a-tooltip class="header-item" title="消息通知1" placement="bottom">
									<header-notice ref="headerNotice" @click.native="() => $refs.headerNotice.show = true" />
								</a-tooltip> -->

        <!--<a-tooltip class="header-item" title="锁屏" placement="bottom">-->
        <!--<headerLock></headerLock>-->
        <!--</a-tooltip>-->
        <!--<a-tooltip class="header-item" id="guideStep1" title="系统设置" placement="bottom">-->
        <!--<span href="javascript:void(0)" @click="handleShowSetting">-->
        <!--<a-icon type="more" style="font-size: 16px;padding: 4px;"/>-->
        <!--</span>-->
        <!--</a-tooltip>-->
        <!-- <a-dropdown class="lang header-item">
          <div>
            <a-icon type="global" />
            {{ langAlias }}
          </div>
          <a-menu @click="langClick" :selected-keys="[lang]" slot="overlay">
            <a-menu-item v-for="lang in langList" :key="lang.key">
              {{ lang.name }}
            </a-menu-item>
          </a-menu>
        </a-dropdown> -->
        <header-avatar class="header-item" />
        <a-tooltip
          class="header-item"
          id="guideStep1"
          :title="$ct('SystemSettings', '系统设置')"
          placement="bottom"
        >
          <span href="javascript:void(0)" @click="handleShowSetting">
            <a-icon type="more" style="font-size: 16px;padding: 4px;" />
          </span>
        </a-tooltip>
      </div>
    </div>
    <t-drawer
      class="setting"
      :visible="showSetting"
      placement="right"
      :closable="false"
      @close="onClose"
      :width="280"
    >
      <div class="setting" slot="handler">
        <a-icon :type="showSetting ? 'close' : 'setting'" />
      </div>
      <setting />
    </t-drawer>
  </a-layout-header>
</template>

<script>
import notification from "ant-design-vue/es/notification";
import Vue from "vue";
import HeaderSearch from "./HeaderSearch";
import HeaderNotice from "./HeaderNotice";
import HeaderAvatar from "./HeaderAvatar";
import headerLock from "./headerLock";
import ChooseOrganization from "./chooseOrganization";
import IMenu from "@/components/menu/menu";
import { mapState, mapMutations, mapGetters } from "vuex";
import Setting from "@/components/setting/Setting";
import { LANG_KEY } from "@/store/mutation-types";
import { getI18nKey, slashToHump } from "@/utils/routerUtil";
import router from "@/router";
import { flatTreeData, _getUUID } from "@/utils/util";
import { getTreeProject } from "@/services/user.js";

export default {
  name: "AdminHeader",
  components: {
    IMenu,
    HeaderAvatar,
    HeaderNotice,
    HeaderSearch,
    Setting,
    headerLock,
    ChooseOrganization,
  },
  props: ["collapsed", "menuData", "headMenuIndex"],
  data() {
    return {
      // i18n: require("../../router/i18n1"),
      // langList: [
      //   {key: "CN", name: "简体中文", alias: "简体"},
      //   {key: "HK", name: "繁體中文", alias: "繁體"},
      //   {key: "US", name: "English", alias: "English"},
      // ],
      langList: [],
      searchActive: false,
      showSetting: false,
      timer: null,
      //项目列表
      project: {
        source: [],
        value: undefined,
      },
      //
      isScreenIocn: false,
    };
  },
  computed: {
    ...mapState("setting", [
      "theme",
      "isMobile",
      "layout",
      "systemName",
      "lang",
      "pageWidth",
    ]),
    ...mapGetters([
      "configData",
      "firstMenu",
      "currentProjectCode",
      "userAccount",
    ]),
    headerTheme() {
      if (
        this.layout == "side" &&
        this.theme.mode == "dark" &&
        !this.isMobile
      ) {
        return "light";
      } else if (this.layout == "mix" && this.theme.mode == "mix") {
        return "dark";
      } else if (this.layout == "side" && this.theme.mode == "mix") {
        return "dark";
      }
      return this.theme.mode;
    },
    headerCss() {
      if (
        this.layout == "side" &&
        this.theme.mode != "night" &&
        this.theme.mode != "mix" &&
        !this.isMobile
      ) {
        return "lightCss";
      } else if (
        this.layout == "head" &&
        this.theme.mode == "dark" &&
        !this.isMobile
      ) {
        return "darkCss";
      } else if (
        this.layout != "side" &&
        this.theme.mode == "light" &&
        !this.isMobile
      ) {
        return "headCss";
      } else if (
        this.layout == "side" &&
        this.theme.mode == "mix" &&
        !this.isMobile
      ) {
        return "nightCss";
      }
      return this.theme.mode;
    },
    langAlias() {
      let lang = this.langList.find((item) => item.key == this.lang);
      return lang.alias;
    },
    menuWidth() {
      const { layout, searchActive } = this;
      const headWidth = layout === "head" ? "100% - 188px" : "100%";
      const extraWidth = searchActive ? "700px" : "456px"; //400px
      return `calc(${headWidth} - ${extraWidth})`;
    },
    // menuWidth()
    // {
    //   const {layout, searchActive} = this;
    //   const headWidth = layout === "head" ? "100% - 188px" : "100%";
    //   const extraWidth = searchActive ? "600px" : "456px"; //400px
    //   return `calc(${headWidth} - '600px')`;
    // },
    systemName() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemName"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "低代码开发平台";
      }
    },
    systemLogo() {
      let index = this.configData.findIndex(
        (item) => item.code === "systemLogo"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "https://zysd-shanghai.oss-cn-shanghai.aliyuncs.com/emis/logo.png";
      }
    },
    menuTitleTranslation() {
      return (fullPath, title) => {
        if (this.$te(slashToHump(fullPath))) {
          return this.$t(slashToHump(fullPath));
        } else {
          return title;
        }
      };
    },
  },
  watch: {
    i18n(val) {
      if (val && val.messages) {
        const messages = this.i18n.messages;
        Object.keys(messages).forEach((key) => {
          this.$i18n.mergeLocaleMessage(key, messages[key]);
        });
      }
    },
  },
  created() {
    // 自定义国际化配置
    if (this.i18n && this.i18n.messages) {
      const messages = this.i18n.messages;
      Object.keys(messages).forEach((key) => {
        this.$i18n.mergeLocaleMessage(key, messages[key]);
      });
    }
    this.getLangList();
  },
  mounted() {
    this.isScreenIocn = JSON.parse(localStorage.getItem("TO_XMDP"));
    // this.start();
  },
  methods: {
    onRefresh(data) {
      this.isScreenIocn = data;
    },

    //返回项目列表页面
    gotoProjectList() {
      this.$router.push({
        path: "/projectHome",
      });
    },

    //返回大屏页面
    gotoLargeScreen() {
      this.$router.push({
        path: "/largeScreen",
      });
    },

    handleDownload() {
      window.open(
        "https://dpmp.jkec.info/docs/数字项目管理平台用户操作手册.pdf"
      );
    },

    start() {
      // 将定时器名字赋值到变量中
      this.timer = setInterval(() => {
        this.$post("/office/sysUserLoginInformation/saveOperationLog", {}).then(
          (res) => {
            if (res.statusCode === 200) {
              console.log("-----插入一条操作数据-----");
            }
          }
        );
      }, 295000);
    },

    getLangList() {
      this.$post("/system/sysLanguageConfig/selectAll").then((res) => {
        if (res.statusCode === 200) {
          res.data.forEach((item) => {
            this.langList.push({
              key: item.configValue,
              name: item.configKey,
            });
            if (item.configStatus === "config_status.01") {
              this.setLang(item.configValue);
              Vue.ls.set(LANG_KEY, item.configValue);
            }
          });
        }
      });
    },

    langClick(val) {
      this.setLang(val.key);
      Vue.ls.set(LANG_KEY, val.key);
    },
    toggleCollapse() {
      this.$emit("toggleCollapse");
    },
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    handleShowSetting() {
      this.showSetting = true;
    },
    onClose() {
      this.showSetting = false;
    },
    ...mapMutations("setting", ["setLang"]),
  },
};
</script>

<style lang="less" scoped>
@import "index";

.admin-header-wide {
  img {
    width: 32px;
    margin: 0 10px;
  }
  display: flex;
  /deep/.project-select-warp {
    // float: left;
    // margin-top: 10px;
    margin-right: auto;
    // margin-left: -20px;
    // height: 32px;
    // .ant-select-selection {
    //   border: none;
    //   font-weight: bold;
    //   font-size: 16px;
    //   color: #333;
    //   box-shadow: none !important;
    //   .ant-select-arrow {
    //     right: 7px;
    //     color: #333;
    //   }
    // }
  }
}

.lightCss,
.headCss {
  color: rgba(0, 0, 0, 0.65) !important;
}

.darkCss {
  color: rgba(225, 225, 225, 0.65) !important;
}

.head-menu-link {
  display: inline-block;
  height: 56px !important;
  line-height: 56px;
}
</style>
